<template>
	<v-layout type="main">
		<div class="alike-lis-header">
			<div class="lis-header-left">
				<div class="add-btn" @click="addModelTestDialog">+ 新增</div>

				<div class="btns-switch">
					<div @click="isCard = true">
						<img src="@/assets/img/List_card.png" v-if="isCard" />
						<img src="@/assets/img/list_nocard.png" v-else />
					</div>
					<div @click="isCard = false">
						<img src="@/assets/img/list_nolist.png" v-if="isCard" />
						<img src="@/assets/img/list_list.png" v-else />
					</div>
				</div>

				<div class="search-box">
					<el-input
						prefix-icon="el-icon-search"
						v-model="Pagedata.name"
						class="search"
						placeholder=""
						@input="searchChange"
					/>
				</div>
			</div>

			<div class="lis-header-right">
				<el-select size="mini" placeholder="请选择" v-model="showThisActive" @change="getData">
					<el-option label="我的模型" value="0"></el-option>
					<el-option label="共享模型" value="1"></el-option>
				</el-select>
			</div>
		</div>

		<div class="has-ver-table-layout">
			<div class="table-layout" v-if="!isCard">
				<el-table :data="tableData" class="myself-table">
					<el-table-column prop="model.name" label="待测试模型">
						<template slot-scope="{ row }">
							<!-- <el-popover placement="right-start" width="320" trigger="hover">
                <row-data :row="row" />
                <el-button type="text" @click="$router.push({ path: '/modelZnyAutoTestt/code', query: { id: row.id } })"
                  slot="reference">{{ row.name }}</el-button>
              </el-popover> -->

							<!-- <el-button type="text" @click="$router.push({ path: '/modelZnyAutoTestt/code', query: { id: row.id } })"
                slot="reference">{{ row.name }}</el-button> -->
							<!-- <el-button type="text" @click="drawerShowHandler(row)" slot="reference">{{ row.name }}</el-button> -->
							<el-button type="text" @click="modelTest(row)" slot="reference">{{ row.model.name }}</el-button>
						</template>
					</el-table-column>

					<el-table-column prop="model.desc" label="描述信息">
						<template slot-scope="{ row }">
							<el-popover placement="top" width="320" trigger="hover" :content="row.model.desc">
								<span class="desc" slot="reference">{{ row.model.desc }}</span>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="node_group_list[0].image.name" label="镜像" />
					<el-table-column prop="node_group_list[0].product.name" label="资源组" />

					<el-table-column prop="status" label="状态">
						<template slot-scope="{ row }">
							<span :class="['alick-list-status', row.status]">●{{ statusMap[row.status] }}</span>
						</template>
					</el-table-column>

					<el-table-column prop="model.version_count" label="版本数量" />
					<el-table-column prop="create_user.nick_name" label="创建用户" />
					<el-table-column prop="update_user.nick_name" label="更新用户" />
					<el-table-column width="180" prop="update_time" label="更新时间" />

					<!-- <el-table-column label="运行时长">
            <template slot-scope="{ row }">
              {{ countRanTime(row.resource && row.resource.start_time) }}
            </template>
          </el-table-column> -->

					<el-table-column label="操作" width="200">
						<template slot-scope="{ row }">
							<el-popconfirm title="您确定要删除吗？" @onConfirm="delModelTest(row)">
								<el-button type="text" slot="reference">删除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<ul class="alike-lis" v-else>
				<li v-for="(item, index) in tableData" :key="index">
					<div class="alike-lis-box">
						<div class="alike-lis-pic" @click="modelTest(item)">
							<v-image :src="item.avatar ? item.avatar : require('@/assets/img/drone3.jpg')" alt="" />
						</div>
						<div class="alike-lis-word">
							<div class="alike-lis-title">
								<span>
									<span @click="modelTest(item)">
										{{ item.name }}
									</span>
									<template v-if="typeof item.status === 'string'">
										<el-tag
											type="danger"
											effect="dark"
											size="mini"
											v-if="['terminated', 'failed', 'Failed'].includes(item.status)"
										>
											{{ statusMap[item.status] }}
										</el-tag>
										<el-tag
											type="success"
											effect="dark"
											size="mini"
											v-else-if="['completed', 'Succeeded', 'running', 'Running'].includes(item.status)"
										>
											{{ statusMap[item.status] }}
										</el-tag>
										<el-tag type="warning" effect="dark" size="mini" v-else>
											{{ statusMap[item.status] }}
										</el-tag>
									</template>
								</span>
							</div>

							<p class="alike-lis-hint">{{ item.desc }}</p>
							<p class="alike-lis-hint">版本数量：{{ item.version_index }}</p>

							<div class="alike-lis-user">
								<span class="user-name">创建人：{{ item.create_user.nick_name }}</span>
								<span class="date">{{ item.create_time }}</span>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="pagination-box">
			<el-pagination
				background
				class="pagination"
				layout="total, prev, pager, next, jumper"
				:page-size="Pagedata.pageSize"
				:current-page.sync="Pagedata.pageNum"
				@current-change="handleCurrentChange"
				:total="Pagedata.total"
			>
			</el-pagination>
		</div>

		<el-drawer title="版本列表" :visible.sync="drawerShow" direction="rtl">
			<ul class="version-list">
				<li
					class="version-item"
					v-for="(item, i) in modelAllVersions"
					:key="item.id"
					@click="getModelTest(modelAllVersions[i], current)"
				>
					<!--          @click="$router.push({ path: '/modelZnyAutoTestt/code', query: { id: current.id, version: item.version } })"-->
					<p>
						<span class="title">{{ item.version }}</span>
						<span class="update-time">更新时间：{{ item.update_time }}</span>
					</p>
					<span class="commit">{{ item.commit_msg }}</span>
				</li>
			</ul>
		</el-drawer>

		<!-- <el-dialog :visible.sync="showModelEvaDialog" title="模型测试" width="840px">
			<el-form class="form myself-form" ref="evaModelForm" :model="evaModelForm" label-width="120px">
				<div v-if="active == 1">
					<el-form-item label="模型名称" prop="version">
						{{ detailData.name }}
					</el-form-item>
					<el-form-item label="模型版本" prop="version">
						{{ version.version }}
					</el-form-item>
					<el-form-item label="类型" prop="version" v-if="false">
						<el-select
							v-model="evaModelForm.type"
							value-key="id"
							@change="modelEvaTypeChange"
							style="width:100%;"
							:popper-append-to-body="false"
							popper-class="select-popper"
							placeholder="请选择"
						>
							<el-option v-for="item in modelEvaTyleOptions" :key="item.id" :label="item.name" :value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="资源组">
						<el-select v-model="node_group_list.product_id" class="full-extent-select">
							<el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id"> </el-option>
						</el-select>
					</el-form-item>
					<div v-if="showDiv">
						<el-form-item label="评估镜像">
							<el-select v-model="node_group_list.image_id" class="full-extent-select">
								<el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id"> </el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="启动命令行" prop="command">
							<el-input type="text" v-model="node_group_list.command" />
						</el-form-item>
					</div>
				</div>
				<div v-if="active == 2">
					<p class="uploader-hint">文件会上传到/workspace目录下</p>
					<el-form-item label="上传文件 " prop=" ">
						<wrapUploader @succeedOver="succeedOver" type="workspace" :biz_id="evaModelForm.id" />
					</el-form-item>
				</div>
				<el-form-item label="" v-if="showDiv && active == 1">
					<el-button type="primary" @click="commitModelEva(detailData.id)">下一步</el-button>
				</el-form-item>
				<el-form-item label="" v-if="!showDiv || active == 2">
					<el-button type="primary" @click="commitModelEva(detailData.id)">确定</el-button>
					<el-button class="none-type" @click="showModelEvaDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog> -->

		<el-dialog :visible.sync="showAddModelEvaDialog" title="新增测试" width="840px">
			<el-form class="form myself-form" ref="evaModelForm" :model="evaAddModelForm" label-width="120px">
				<div v-if="active == 1">
					<el-form-item label="模型名称" prop="name">
						<el-select
							v-model="evaAddModelForm.name"
							value-key="id"
							@change="modelAddEvaNameChange"
							style="width:100%;"
							:popper-append-to-body="false"
							popper-class="select-popper"
							placeholder="请选择"
						>
							<el-option v-for="item in modelEvaList" :key="item.id" :label="item.name" :value="item"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="模型版本">
						<el-select
							v-model="evaAddModelForm.version"
							value-key="id"
							@change="modelAddEvaVersionChange"
							style="width:100%;"
							:popper-append-to-body="false"
							popper-class="select-popper"
							placeholder="请选择"
						>
							<el-option v-for="item in versionOptions" :key="item.id" :label="item.version" :value="item"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="镜像">
						<el-select v-model="node_group_list.image_id" disabled class="full-extent-select">
							<el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="资源组">
						<el-select v-model="node_group_list.product_id" class="full-extent-select">
							<el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="启动命令行" prop="command" v-if="evaAddModelForm.type">
						<el-input type="text" v-model="evaAddModelForm.type.eva_image.command" />
					</el-form-item>
					<el-form-item label="端口映射">
						<plug-port :port_list="port_list" @infoPort="infoPort" v-if="port_list" />
					</el-form-item>
				</div>

				<el-form-item label="">
					<el-button type="primary" @click="commitAddModelEva">确定</el-button>
					<el-button class="none-type" @click="showAddModelEvaDialog = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</v-layout>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getModelTests, addModelTest, delModelTest, getAllModelTestbyModelVersion } from "@/api/modelTest";
import { getModels } from "@/api/model";
import { delModelVersion } from "@/api/modelversion";
import { getAllModelVersions } from "@/api/modelversion";
import { getAllModelEvaluationTypes } from "@/api/modelEvaType";
import { getAllProducts } from "@/api/product";
import { getAllImages } from "@/api/image";
// import { paramMap } from '@/utils/maps'
import plugPort from "@/components/module/plug-in-port";

export default {
	data() {
		return {
			modelAllVersions: [],
			showModelEvaDialog: false,
			showAddModelEvaDialog: false,
			evaAddModelForm: {},
			modelEvaList: [],
			evaModelForm: {}, //模型评估
			modelEvaTyleOptions: [], //模型评估类型选项
			active: 1,
			node_group_list: {
				type: 1,
				pod_num: 1,
			},
			showDiv: false,
			detailData: {},
			version: {},
			productOptions: [], //资源组选项
			imageOptions: [], //评估镜像选项
			showThisActive: "0",
			// list_flag: paramMap['list_flag'],
			isCard: false,
			tableData: [],
			Pagedata: {
				pageNum: 1,
				pageSize: 12,
				total: 0,
				name: "",
			},
			drawerShow: false,
			current: {},
			port_list: [],
			versionOptions: [],
		};
	},
	created() {
		this.Pagedata = { ...this.Pagedata, pageNum: this.pageNum, name: this.searchValue };
	},
	mounted() {
		this.getData();
		this.getAllModelEvaTypes();
		this.getImageList();
		this.getProductList();
	},
	computed: mapState({
		pageNum: (state) => state.menuStore.pageData.pageNum,
		searchValue: (state) => state.menuStore.searchValue,
	}),
	methods: {
		...mapActions(["updatePageNum", "updateSearch"]),
		modelTest(item) {
			this.getModelTest(item.model_version_id, item);

			// if (item.latest_versions.length > 1) {
			// 	this.drawerShowHandler(item);
			// } else {
			// 	this.getModelTest(item.latest_versions[0], item);
			// }
		},
		async getModelTest(version, item) {
			this.detailData = item;
			this.version = version;
			let ret = await getAllModelTestbyModelVersion(version);
			this.toModelEva(ret.data.id, item.id);

			// if (ret.data) {
			// 	this.toModelEva(ret.data.id, item.id);
			// } else {
			// 	this.showModelEvaDialog = true;
			// 	this.evaModelForm.model_id = item.id;
			// 	this.evaModelForm.model_version_id = version.id;
			// }
		},
		async addModelTestDialog() {
			this.showAddModelEvaDialog = true;
			this.evaAddModelForm = {
				version: {},
			};
			this.node_group_list = {
				type: 1,
				pod_num: 1,
			};

			this.node_group_list.image_id = this.imageOptions[0];

			let res = await getModels({ visibility: this.showThisActive });
			this.modelEvaList = res.data.list;
		},
		async modelEvaNameChange(data) {
			let resVer = await getAllModelVersions({ model_id: data.id });
			this.evaModelForm.version = resVer.data[0] || {};
		},
		modelAddEvaNameChange(data) {
			this.$nextTick(async () => {
				let resVer = await getAllModelVersions({ model_id: data.id });
				// this.evaModelForm.version = resVer.data[0] || {};
				this.versionOptions = resVer.data;

				console.log(this.versionOptions);
			});
		},
		modelAddEvaVersionChange() {},
		infoPort(ports) {
			this.port_list = ports;
			console.log(this.port_list);
		},
		async commitAddModelEva() {
			console.log(this.evaAddModelForm, "evaAddModelForm");

			// this.evaAddModelForm.type_id = this.evaAddModelForm.type.id;
			this.evaAddModelForm.type_id = "1584070974760013";
			this.evaAddModelForm.model_id = this.evaAddModelForm.name.id;
			this.evaAddModelForm.model_version_id = this.evaAddModelForm.version.id;
			this.evaAddModelForm.node_group_list = [this.node_group_list];
			this.evaAddModelForm.port_list = this.port_list;
			this.evaModelForm.type = 1;

			console.log(this.evaAddModelForm, "evaAddModelForm");

			this.evaAddModelForm.node_group_list = [
				{
					image_id: this.node_group_list.image_id.id,
					// command: this.evaAddModelForm.type.eva_image?.command,
					product_id: this.node_group_list.product_id,
					type: 1,
					pod_num: 1,
				},
			];

			let ret = await addModelTest(this.evaAddModelForm);
			// this.evaAddModelForm = ret.data;
			// console.log(this.evaAddModelForm);

			this.showAddModelEvaDialog = false;
			this.$message.success("创建成功");
			this.toModelEva(ret.data.id, ret.data.model_id);
			this.getData();
		},
		async getEvaluate(item, version) {
			console.log("item", item);
			this.detailData = item;
			let res = await getAllModelVersions({ model_id: item.id });
			let versionOptions = res.data;

			if (versionOptions.length > 0) {
				if (version) {
					this.version = versionOptions.filter((its) => its.version === version)[0];
				} else {
					this.version = versionOptions[0];
				}
			}
			let ret = await getAllModelTestbyModelVersion(this.version.id);
			console.log("ret", ret);
			if (ret.data) {
				this.toModelEva(ret.data.id, item.id);
			} else {
				this.showModelEvaDialog = true;
				this.evaModelForm.model_id = item.id;
				this.evaModelForm.model_version_id = this.version.id;
			}
		},
		// 新建模型测试
		commitModelEva(id) {
			if (this.active == 1) {
				this.$refs.evaModelForm.validate(async (valid) => {
					if (valid) {
						console.log("");
						if (this.evaModelForm.type.id != "1") {
							// 非自定义
							this.evaModelForm.type_id = this.evaModelForm.type.id;
							this.evaModelForm.node_group_list = [
								{
									image_id: this.evaModelForm.type.eva_image_id,
									command: this.evaModelForm.type.eva_image.command,
									product_id: this.node_group_list.product_id,
									type: 1,
									pod_num: 1,
								},
							];
						} else {
							this.evaModelForm.type_id = this.evaModelForm.type.id;
							this.evaModelForm.node_group_list = [this.node_group_list];
						}
						let ret = await addModelTest(this.evaModelForm);
						this.evaModelForm = ret.data;
						if (this.showDiv) {
							this.active = 2;
						} else {
							this.toModelEva(ret.data.id, id);
						}
					}
				});
			} else {
				this.toModelEva(this.evaModelForm.id);
			}
		},

		toModelEva(model_test_id, id) {
			let query = {
				model_test_id,
				id,
			};
			console.log("query", query);
			this.$router.push({
				path: "/modelZnyAutoTestt/code",
				query,
			});
		},
		// 获取模型评估选项
		async getAllModelEvaTypes() {
			let res = await getAllModelEvaluationTypes();
			let data = res.data;
			data.push({ name: "自定义", id: "1" });
			this.modelEvaTyleOptions = data;
			console.log(" this.modelEvaTyleOptions", this.modelEvaTyleOptions);
		},
		// 获取资源组选项
		async getProductList() {
			let res = await getAllProducts();
			this.productOptions = res.data;
		},
		// 评估镜像选项
		async getImageList() {
			let res2 = await getAllImages({ visibility: 2, type: 7 });
			this.imageOptions = res2.data;
		},
		// // 修改模型评估类型
		// modelEvaTypeChange() {
		// 	if (this.evaModelForm.type.id == "1") {
		// 		this.showDiv = true;
		// 	} else {
		// 		this.showDiv = false;
		// 	}
		// },
		// // 新增功能修改模型评估类型
		// modelAddEvaTypeChange(data) {
		// 	this.evaAddModelForm.node_group_list = [data.test_image || {}];
		// 	console.log(this.evaAddModelForm, "evaAddModelFormevaAddModelForm");
		// },
		async drawerShowHandler(row) {
			this.drawerShow = true;
			this.current = row;
			let res = await getAllModelVersions({ model_id: row.id });
			this.modelAllVersions = res.data;
		},
		handleChange(val) {
			this.list_flag = val;
		},
		async getData() {
			let res = await getModelTests({ visibility: this.showThisActive, ...this.Pagedata });
			this.tableData = res.data.list;
			this.Pagedata.total = res.data.total;
		},
		searchChange() {
			this.updatePageNum(1);
			this.Pagedata.pageNum = 1;
			this.updateSearch(this.Pagedata.name);
			this.getData();
		},
		async delModelTest(data) {
			// let res = await this.$isDel();
			// if (res) {
			await delModelTest(data);
			this.getData();
			// }
		},
		stop(row) {
			console.log(row);
		},
		async del(row) {
			// let res = await this.$isDel();
			// if (res) {
			await delModelVersion(row);
			this.getData();
			// }
		},
		setListOrGraph() {
			this.list_flag = !this.list_flag;
		},
		handleCurrentChange(val) {
			this.Pagedata.pageNum = val;
			this.getData();
		},
	},
	components: { plugPort },
};
</script>

<style lang="less" scoped>
.switch {
	display: flex;
	justify-content: space-between;

	// overflow: hidden;
	// padding-right: 500px;
	span {
		padding-right: 20px;
	}

	a {
		float: left;
		width: 20px;
		height: 20px;
		margin-left: 14px;
		margin-top: 10px;
		background-color: #767676;
	}

	.btn-pic {
		mask: url(~@/assets/img/file-icon/btn-pic.svg);
		mask-size: 20px 20px;
	}

	.btn-lis {
		mask: url(~@/assets/img/file-icon/btn-lis.svg);
		mask-size: 20px 20px;
	}

	.acticv {
		background-color: #409eff;
	}

	.add-btn {
		float: left;
	}
}

.desc {
	display: -webkit-inline-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	white-space: normal;
	width: 90%;
}

.version-list {
	padding: 0.625rem 0;

	.version-item {
		line-height: 2em;
		padding: 0.625rem 1.25rem;
		border-bottom: 1px solid #eee;
		cursor: pointer;

		&:hover {
			background: #eee;
		}

		p {
			display: flex;
			justify-content: space-between;
			padding: 0.3125rem 0;
		}

		.title {
			font-size: 20px;
		}

		.commit {
			color: #808080;
			display: -webkit-inline-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			white-space: normal;
			width: 90%;
		}
	}
}
</style>
